<template>
  <div class="productInfo">
    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="140px" style="width: 600px" size="small"  >
      <el-form-item label="商品分类：" prop="productCategoryId" >
        <div class="block">
            <el-cascader  class="cascader"
            v-model="value" clearable
            :options="productCateOptions"
            placeholder="请选择" ></el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="商品名称：" prop="name">
        <el-input v-model="value.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题：" prop="subTitle">
        <el-input v-model="value.subTitle"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌：" prop="brandId">
        <div class="block1">
          <el-select
          v-model="value.brandId"
          placeholder="请选择品牌">
          <el-option
            v-for="item in brandOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
      </el-form-item>
      <el-form-item label="商品介绍：">
        <el-input
          :autoSize="true"
          v-model="value.description"
          type="textarea"
          placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="商品货号：">
        <el-input v-model="value.productSn"></el-input>
      </el-form-item>
      <el-form-item label="商品售价：">
        <el-input v-model="value.price"></el-input>
      </el-form-item>
      <el-form-item label="市场价：">
        <el-input v-model="value.originalPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品库存：">
        <el-input v-model="value.stock"></el-input>
      </el-form-item>
      <el-form-item label="计量单位：">
        <el-input v-model="value.unit"></el-input>
      </el-form-item>
      <el-form-item label="商品重量：">
        <el-input v-model="value.weight" style="width: 300px;margin-left: -130px"></el-input>
        <span style="margin-left: 10px">克</span>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="value.sort"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mockProductadd,getProduct } from '@/api'
export default {
  name:'ProductInfoDetail',
  props: {
    value:Object,
    isEdit:false,
  },
  data(){
    return {
      //选中商品分类的值
      selectProductCateValue:[],
      productCateOptions: [
        {
          value: 'zhinan',
          label: '服装',
          children: [{label: '外套'}, { label: '裙子'}]
        }
      ],
      brandOptions: [],
      rules: {
          name: [
            {required: true, message: '请输入商品名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
          requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
        }
    }
  },
  created(){
    // this.getProductList();
  },
  methods:{
    //点击跳转到下一页
     handleNext(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('nextStep');
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
    //获取商品列表
  } 
}
</script>

<style lang="css" scoped>
.productInfo{
  margin-top: 50px;
}
.cascader{
  margin-left: 20px;
}
.block{
  float: left;
  margin-left:-20px;
}
.block1{
  float: left;
  margin-left:-5px;
} 
</style>
